@import '../../../../scss/image';
@import '../../../../scss/colors';

$type: screen;
$proto: max-width;
$value: 900px;
$footer-height: 100px;
$body-height: calc(100% - 100px);
$w-size: 900px;
$input-heigth: 52px;
$default-font-size: 16px;
$default-disabled-color:#c9c9c9;

.content-left {
    float: left;
    width: 420px;
    height: 600px;
    text-align: center;
}

.content-right {
    float: right;
    width: 480px;
    height: 600px;
    text-align: left;
    padding: {
        top: 60px;
        left: 36px;
        right: 38px;

    }
    background: {
        color: $bg-color;
    }

    .login-form-title {
        height: 33px;
        opacity: 1;
        font-size: 36px;
        font-family: Hiragino Sans GB;
        color: $fort-color;
        letter-spacing: 0px;
    }

    .login-form-body {

        .login-form-tabsset {
            // display: inline-block;
            display: flex;
            margin: {
                top: 42px;
            }
            .login-form-tabs {
               
                .login-form-tabs-title {
                    width: 45px;
                    height: 19px;
                    opacity: 1;
                    font-size: 20px;
                    font-family: Hiragino Sans GB;
                    line-height: 10px;
                    letter-spacing: 0px;

                }

                .login-form-tabs-title-active {
                    color: $tabs-active-color;
                }

                .login-form-tabs-title-active-bottom {
                    background: {
                        color: $tabs-active-color;
                    }
                    height: 4px;
                    width: 16px;
                    margin: 0 auto;
                    margin: {
                        top: 12px;
                    }
                    border-radius: 4px;
                    
                }

                &:nth-child(2) {
                    margin: {
                        left: 50px;
                    }
                }
                 
                display: inline;
            }
        }

        .form {
            margin: {
                top: 30px;
            }

            // label {
            //     color: salmon !important;
            // }
        }

        .form-footer {
            margin: {
                top: 50px;
            }

            .button-login {
                width: 100%;
                background: {
                    color: $primary-color;
                }
                color: $bg-color;
                // width: 40px;
                height: 48px;
                opacity: 1;
                font-size: 20px;
                font-family: Hiragino Sans GB;
                letter-spacing: 0px;

                &:disabled {
                    background-color: $disable-color;
                    border-color: $disable-color;
                }
            }
        }
        
    }

    .login-form-footer {
        position: relative;
        top: 34px;
        width: 404px;
        display: flex;

        a {
            // width: 91px;
            height: 19px;
            opacity: 1;
            font-size: 20px;
            font-family: Hiragino Sans GB;
            color: $balck;
            letter-spacing: 0px;

            &:hover, &:active{
                color: $a-color;
            }

            .fortget-password {
                &:hover, &:active{
                    color: $a-color;
                }
            }
        }
    }
}

input {
    height: $input-heigth;
    font-size: $default-font-size;
}

label {
    height: 16px;
    opacity: 1;
    font-size: $default-font-size;
    font-family: Hiragino Sans GB;
    color: $fort-color;
    line-height: 10px;
    letter-spacing: 0px;
}